<!-- In this file, I made adjustment to make opening page more proper. In my opinion, working with long horizontal tables is logical idea -->
<!-- For each paragraph and picture, I added  a horizontal table-->
<%@page import="java.util.*,java.text.*"%>
<%@page import="QRCG.DatabaseManager"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My Profile</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.accordion.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		jQuery('#list1b').accordion({
			autoheight : false
		});
		jQuery('#list2b').accordion({
			autoheight : false
		});
		jQuery('#list3b').accordion({
			autoheight : false
		});
	});
</script>
<script language="javascript">
	function popup(url) {
		var win_dow = window.open(url, 'myPopUp',
				"type=fullWindow, fullscreen,scrollbars=yes");
	}
</script>
</head>

<%@ include file="ProfileHeader.jsp"%>

<%
if (session.getAttribute("nickname") != null) {
%>

<div id="page">
	<div id="page-bgtop">
		<div id="page-bgbtm">
			<div id="content">
				<div id="profile-page">
					<table align="center">
						<tr>
							<td>Welcome, here is your personal page.</td>
			
						</tr>
						<tr>
							<td>You can click <a href="ChangePersInfo.jsp" 
							onclick="return loadIframe('ifrm', this.href)">here</a> to change your personal information</td>
			
						</tr>
						<tr>
							<td>If you want to see all the games that you have created, click <a	href="UserCreatedGames.jsp" 
							onclick="return loadIframe('ifrm', this.href)">here</a></td>
			
						</tr>
						<tr>
							<td>Or, if you want to see all the games that you have registered and been willing to play, click <a 
							href="RegisteredGames.jsp" onclick="return loadIframe('ifrm', this.href)">here</a></td>
			
						</tr>						
					</table>
				</div>								
			</div>
			<!-- end #content -->


			<div id="sidebar">
				<ul>
					<li>
						<div style="clear: both;">&nbsp;</div>
					</li>
					<li>
						<h2>TOP ONGOING GAMES</h2>
					</li>
					<li>
						<div class="basic" id="list1b">
							<%
							final int  GAME_LIMIT = 5;

							  String gameinfo = "";
							  String desc = "";
							  String u ="";
							  DatabaseManager connection = new DatabaseManager();
							  connection.connect();
							  String user_id = (String)session.getAttribute("user_id");
							  DateFormat df = new SimpleDateFormat("yyyy-MM-dd");
							  String today = df.format(new Date());
							  
							  ArrayList<HashMap<String, Object>> games = new ArrayList<HashMap<String, Object>>();
		
								games = connection.getSortedGames("rating",today,GAME_LIMIT);
								
								if (!games.isEmpty()) {
									for (int i = 0; i < games.size(); i++) {
										HashMap<String, Object> map1 = (HashMap<String, Object>) games
												.get(i);
									
										u= "ViewTheGame.jsp?game_id=" + map1.get("game_id");
										
										gameinfo ="Location: " +connection.getGameInformation(DatabaseManager.GameInformation.LOCATION, map1.get("game_id").toString());
										
										desc = (String)map1.get("description");
										//take first 250 char of the game description
										if(desc.length() > 250)
										{
											desc = desc.substring(0, 250);
										}
										
										gameinfo+="<br>Description: " + desc;
										
										
							%>
							<a><%=map1.get("name")%></a>
							<div>
								<p><%=gameinfo %></p>
								<p style="cursor: pointer; color: #D14836;" onclick="javascript:popup('<%=u%>')" >Click here for more information</p>
							</div>
							
							<%} } %>
						</div>
					</li>

				</ul>
			</div>
			<!-- end #sidebar -->
						<!-- REGISTERED GAMES -->
			<div id="sidebar">
				<ul>
					<li>
						<div style="clear: both;">&nbsp;</div>
					</li>
					<li>
						<h2>REGISTERED GAMES</h2>
					</li>

					<li>
						<div class="basic" id="list2b">

							<%

						games = connection.getUserGames(user_id, GAME_LIMIT);
						
						if (!games.isEmpty()) {
							for (int i = 0; i < games.size(); i++) {
								HashMap<String, Object> map1 = (HashMap<String, Object>) games
										.get(i);
							
								u= "ViewTheGame.jsp?game_id=" + map1.get("game_id");
								
								gameinfo ="Location: " +connection.getGameInformation(DatabaseManager.GameInformation.LOCATION, map1.get("game_id").toString());
								
								System.out.println((String)map1.get("description"));
								desc = (String)map1.get("description");
								
								if(desc.length() > 250)
								{
									desc = desc.substring(0, 250);
									desc += "...";
								}
								
								gameinfo+="<br>Description: " + desc;
						%>
							<!-- <li><a href="<%=u%>" onMouseover="showit(0,'<%=gameinfo %>')"><%=map1.get("name")%></a></li> -->
							<a><%=map1.get("name")%></a>
							<div>
								<p><%=gameinfo %></p>
								<p style="cursor: pointer; color: #D14836;"
									onclick="javascript:popup('<%=u%>')">Click here for more
									information</p>
							</div>

							<%} }
						else {%>
							<div>
								<p>
									<font color=#D14836>You haven't registered to any games
										yet!</font>
								</p>
							</div>
							<%}
						%>

						</div>
					</li>
				</ul>
			</div>
			<!-- end #sidebar Registered Games -->

			<!-- CREATED GAMES -->
			<div id="sidebar">
				<ul>
					<li>
						<div style="clear: both;">&nbsp;</div>
					</li>
					<li>
						<h2>CREATED GAMES</h2>
					</li>

					<li>
						<div class="basic" id="list3b">

							<%

						games = connection.getCreatedGames(user_id, GAME_LIMIT);
						
						if (!games.isEmpty()) {
							for (int i = 0; i < games.size(); i++) {
								HashMap<String, Object> map1 = (HashMap<String, Object>) games
										.get(i);
							
								u= "ViewTheGame.jsp?game_id=" + map1.get("game_id");
								
								gameinfo ="Location: " +connection.getGameInformation(DatabaseManager.GameInformation.LOCATION, map1.get("game_id").toString());
								
								desc = (String)map1.get("description");
								if(desc.length() > 250)
								{
									desc = desc.substring(0, 250);
									desc += "...";
								}
								
								gameinfo+="<br>Description: " + desc;
						%>
							<!-- <li><a href="<%=u%>" onMouseover="showit(0,'<%=gameinfo %>')"><%=map1.get("name")%></a></li> -->
							<a><%=map1.get("name")%></a>
							<div>
								<p><%=gameinfo %></p>
								<p style="cursor: pointer; color: #D14836;"
									onclick="javascript:popup('<%=u%>')">Click here for more
									information</p>
							</div>

							<%} } 
						else {%>
							<div>
								<p>
									<font color=#D14836>You haven't created any games yet!</font>
								</p>
							</div>
							<%}
						%>
						</div>
					</li>
				</ul>
			</div>
			<!-- end #sidebar Created Games -->
			


			<div style="clear: both;">&nbsp;</div>
		</div>
	</div>
</div>
<!-- end #page -->
<%
	} else {
		response.sendRedirect("index.jsp");
	}
%>
<%@ include file="footer.jsp"%>